// 以服务的方式来调用
<template>
<p>Loading 还可以以服务的方式调用。 你可以像这样引入 Loading 服务：</p>
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">import</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> { ElLoading } </span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">from</span><span style="--shiki-light: #032F62; --shiki-dark: #9ECBFF;"> 'element-plus'</span></span></code></pre></div>
<p>在你需要的时候通过下面的方式调用：</p>
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">ElLoading.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">service</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">(options)</span></span></code></pre></div>
<p>其中<code>options</code>参数为 Loading 的配置项，具体见下表。 <code>LoadingService</code> 会返回一个 Loading 实例，可通过调用该实例的 <code>close</code> 方法来关闭它：</p>
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">const</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> loadingInstance</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;"> =</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> ElLoading.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">service</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">(options)</span></span>
<span class="line"><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">nextTick</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">(() </span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">=&gt;</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> {</span></span>
<span class="line"><span style="--shiki-light: #6A737D; --shiki-dark: #6A737D;">  // Loading should be closed asynchronously</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">  loadingInstance.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">close</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">()</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">})</span></span></code></pre></div>
<p>需要注意的是，以服务的方式调用的全屏 Loading 是单例的。 若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：</p>
<div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">const</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> loadingInstance1</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;"> =</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> ElLoading.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">service</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">({ fullscreen: </span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;">true</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">const</span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;"> loadingInstance2</span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;"> =</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> ElLoading.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">service</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">({ fullscreen: </span><span style="--shiki-light: #005CC5; --shiki-dark: #79B8FF;">true</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> })</span></span>
<span class="line"><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">console.</span><span style="--shiki-light: #6F42C1; --shiki-dark: #B392F0;">log</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;">(loadingInstance1 </span><span style="--shiki-light: #D73A49; --shiki-dark: #F97583;">===</span><span style="--shiki-light: #24292E; --shiki-dark: #E1E4E8;"> loadingInstance2) </span><span style="--shiki-light: #6A737D; --shiki-dark: #6A737D;">// true</span></span></code></pre></div>
<p>此时调用它们中任意一个的 <code>close</code> 方法都能关闭这个全屏 Loading。</p>
<p>如果完整引入了 Element Plus，那么 <code>app.config.globalProperties</code> 上会有一个全局方法<code>$loading</code>， 它的调用方式为：<code>this.$loading(options)</code>，同样会返回一个 Loading 实例。</p>

</template>
<style scoped>
@import '../../assets/elementPlusDemo.css'
</style>